<template>
    <breadcrumb base-title="客户" title="签单客户"/>
    <div class="w-full box-border p-16px">
        <div class="mg-b-16 bg-#ffffff p-16px rounded-8px">
            <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
        </div>
        <el-card>
            <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
                <template #settings>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="toDetail(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
    </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getDealList, getDeptList, getSalesmanList, getProductList } from '@/api/clients/signClient.ts'

const router = useRouter()

const sortField = ref('')
const sortOrder = ref('')

const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '',
            placeholder: '请选择所属分组',
            type: 'selectDept',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                // if (item.options?.length) return
                // getDeptList({
                //     type: 1
                // }).then(res => {
                //     item.options = res
                // })
            },
            handleChange: (item) => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
        productType: {
            name: '产品',
            prop: 'productType',
            value: '',
            placeholder: '请选择产品',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'dictLabel',
                value: 'dictValue'
            },
            handleFocus: (item) => {
                if (item.options?.length) return
                getProductList('crm_product_type').then(res => {
                    item.options = res
                })
            },
            handleChange: (item) => {
            }
        },
        companyName: {
            name: '客户名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入客户名称',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '新增行业',
        //     click: () => {
        //         addType.value = 'add'
        //         showAdd.value = true
        //         curItem.value = {}
        //     }
        // }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
    },
    {
        label: '产品',
        prop: 'productTypeName',
    },
    {
        label: '商务负责人',
        prop: 'salesName',
    },
    {
        label: '所属分组',
        prop: 'deptName',
    },
    {
        label: '开通时间',
        prop: 'openTime',
        sortable: 'custom'
    },
    {
        label: '累计金额',
        prop: 'amount',
    }
])

const tableData = ref([])

const sortMethod = (orderInfo) => {
    if (orderInfo.order) {
        const map = {
            ascending: 'ASC',
            descending: 'DESC'
        }
        sortField.value = orderInfo.prop,
        sortOrder.value = map[orderInfo.order]
    } else {
        sortField.value = null
        sortOrder.value = null
    }
    getList()
}

const handleSearch = () => {
    getList()
}

const handlePageChange = () => {
    getList()
}

const toDetail = (row) => {
    const map = {
        0: 'detailSaasPay',
        3: 'detailPeriodInsure',
        2: 'detailWeInsure',
        6: 'detailGroupInsure',
        1: 'detailEleSign'
    }
    router.push({
        path: map[row.productType],
        query: {
            id: btoa(row.id),
            companyId: btoa(row.companyId)
        }
    })
}

const createQuery = () => {
    const data = {}
    for(const key in filterData.value.list) {
        if(typeof filterData.value.list[key].value === 'string') {
            filterData.value.list[key].value = filterData.value.list[key].value.trim()
        }
        data[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return data
}

const getList = () => {
    getDealList({
        ...createQuery(),
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        sortField: sortField.value,
        sortOrder: sortOrder.value,
    }).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount
    })
}

onActivated(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.container {
    padding: 16px;
}
.set-height {
    // height: calc(100vh - 310px);
    // overflow: auto;
}
</style>
